<script setup>
import { reactive } from 'vue'
import { Icon } from 'tdesign-vue-next'
import { useRouter } from 'vue-router'
const router = useRouter()

const formData = reactive({
  email: '',
  authCode: ''
})
</script>

<template>
  <t-space direction="vertical" class="space">
    <t-form ref="form" :data="formData" :colon="true" :label-width="0">
      <t-form-item name="email">
        <t-input v-model="formData.email" class="input" size="large" clearable placeholder="请输入">
          <template #prefix-icon>
            <icon name="mobile" />
          </template>
        </t-input>
      </t-form-item>

      <t-form-item name="authCode">
        <div class="space-div">
          <t-input
            v-model="formData.authCode"
            class="input"
            style="margin-right: 10px"
            size="large"
            clearable
            placeholder="请输入"
          >
          </t-input>
          <t-button theme="default" size="large" variant="outline" style="width: 200px">
            发送验证码
          </t-button>
        </div>
      </t-form-item>

      <t-form-item>
        <t-button size="large" type="submit" block style="width: 100%; margin: 15px 0">
          登录
        </t-button>
      </t-form-item>
    </t-form>
    <t-space style="margin: 5px 0">
      <t-link theme="primary" @click="router.push('/login/byQRCode')">使用微信扫一扫登录</t-link>
      <t-divider layout="vertical" />
      <t-link theme="primary" @click="router.push('/login/byPassword')">使用账号密码登录</t-link>
    </t-space>
    <p style="color: rgb(126, 126, 126)">Copyright @ 2023 RadianceM K2-410. All Rights Reserved</p>
  </t-space>
</template>

<style scoped lang="scss">
@import '../../../style/common.scss';
.space {
  position: relative;
  @include cf;
  width: 85%;
  padding: 0;
  margin: 15px 0px;

  .input {
    position: relative;
    width: 100%;
  }
  .space-div {
    position: relative;
    @include cf;
    flex-direction: row;
    width: 100%;
  }
}
</style>
